<template>
  <div class="app-container">
    <vxe-form
      ref="queryForm"
      :data="query.baseParams"
      @submit="confirmBaseQueryData"
    >
      <vxe-form-item field="mobile" title="手机号" :item-render="{}">
        <template #default>
          <el-input v-model="query.baseParams.mobile" clearable />
        </template>
      </vxe-form-item>
      <vxe-form-item field="depId" title="部门" :item-render="{}">
        <template #default>
          <UpmsDepCascader v-model="query.baseParams.depId" clearable :dep-pid-list.sync="depList" @change="confirmBaseQueryData" />
        </template>
      </vxe-form-item>
      <vxe-form-item field="enable" title="是否可用" :item-render="{}">
        <template #default>
          <el-select v-model="query.baseParams.enable" clearable @change="confirmBaseQueryData">
            <el-option value="ENABLE" label="是" />
            <el-option value="DISABLE" label="否" />
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template #default>
          <vxe-button status="primary" type="submit">查询</vxe-button>
          <vxe-button type="button" @click="restBaseForm">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-toolbar custom>
      <template #buttons>
        <vxe-button status="success" @click="showModal('create',{})">新增</vxe-button>
        <vxe-button status="primary" @click="showModal('online',{})">在线用户</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      :loading="tableLoading"
      :column-config="{resizable: true}"
      :data="tableData"
      @sort-change="tableSortChange"
    >
      <vxe-column type="seq" align="right" width="40" />
      <!-- <vxe-column field="userImage" title="头像" align="center" width="80">
        <template #default="{row}">
          <TableImage :src="row.userImage" />
        </template>
      </vxe-column> -->
      <vxe-column field="mobile" title="手机号" />
      <vxe-column field="realname" title="姓名" />
      <vxe-column field="depId" title="部门">
        <template #default="{row}">
          {{ getObjById(depList,row.depId).label }}
        </template>
      </vxe-column>
      <vxe-column field="roleIds" title="角色">
        <template #default="{row}">
          <div v-for="(roleId,idx) in row.roleIds" :key="idx">
            <el-tag :type="getObjById(roleList,roleId) ?'primary':'info'" style="margin-top:2px;">{{ getObjById(roleList,roleId).roleName }}</el-tag>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="lastUpPassTime" title="修改密码时间" :visible="false" />
      <vxe-column field="enable" title="是否可用" align="center" width="100">
        <template #default="{row}">
          <el-tag v-if="row.enable === 'ENABLE'" type="primary">是</el-tag>
          <el-tag v-if="row.enable === 'DISABLE'" type="danger">否</el-tag>
        </template>
      </vxe-column>
      <vxe-column field="op" title="操作">
        <template #default="scope">
          <vxe-button type="text" status="primary" @click="showModal('update',scope.row)">编辑</vxe-button>
          <vxe-button type="text" status="danger" @click="deleteTableRow(scope.row.id)">删除</vxe-button>
          <vxe-button type="text" status="primary" @click="resetPassword(scope.row.id)">重置密码</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      background
      :current-page.sync="query.page.currentPage"
      :page-size.sync="query.page.pageSize"
      :total="tableTotalRow"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="changePage"
    />
    <create-dialog
      v-if="dialogs.create.visible"
      v-model="dialogs.create.visible"
      :form-data="dialogs.create.formData"
      @success="loadTable"
    />
    <update-dialog
      v-if="dialogs.update.visible"
      v-model="dialogs.update.visible"
      :form-data="dialogs.update.formData"
      @success="loadTable"
    />
    <online-user-dialog
      v-if="dialogs.online.visible"
      v-model="dialogs.online.visible"
      :form-data="dialogs.online.formData"
    />

  </div>
</template>

<script>
import Api from '@/api/upms/user'
import UpmsRoleApi from '@/api/upms/role'
import CreateDialog from './dialog/CreateDialog'
import UpdateDialog from './dialog/UpdateDialog'
import OnlineUserDialog from './dialog/OnlineUserDialog'
import { VxeTableMixin } from '@/mixins/vxe/VxeTableMixin'
import { VxeSysDataMixin } from '@/mixins/vxe/VxeSysDataMixin'
export default {
  name: 'UpmsUser',
  components: { CreateDialog, UpdateDialog, OnlineUserDialog },
  mixins: [VxeTableMixin, VxeSysDataMixin],
  data() {
    return {
      roleList: [],
      depList: [],
      api: {
        query: Api.page,
        delete: Api.delete
      },
      query: {
        baseParams: {
          mobile: undefined

        }
      },
      dialogs: {
        online: {
          visible: false
        }

      }
    }
  },
  computed: {

  },
  watch: {
    tableData: {
      handler(n, o) {
      }
    }
  },
  mounted() {
    this.confirmBaseQueryData()
    this.doInitRoleList()
  },
  methods: {
    doInitRoleList() {
      UpmsRoleApi.page({}).then(({ data }) => {
        this.roleList = data
      })
    },
    resetPassword(id) {
      this.confirm({ api: Api.resetPassword, params: id, title: '重置密码' })
    }
  }
}
</script>

<style>

</style>
